<template>
  <div class="three-map-container">
    <div class="three-map-body" ref="chineseLineId"></div>
    <div class="three-map-header">
      <div class="header-tree">
        <div><i class="dx-tree" /></div>
        <div @click="getTrees">图层</div>
      </div>
      <div
        v-if="
          loadingProgressValue !== 0 &&
          loadingProgressValue !== 100 &&
          loadingProgressValue !== '0'
        "
        style="color: #299dc8"
      >
        模型加载中：{{ loadingProgressValue.toFixed(2) }}%
      </div>
      <div class="header-cooper">
        <!-- <div><i class="dx-wakuang" />钻孔</div> -->
        <div @click.stop="handleProfileModels"><i class="dx-pouqie" />剖切</div>
        <div @click.stop="modelExplode"><i class="dx-rongqibaozha" />爆炸</div>
        <div @click.stop="closeContainer"><i class="el-icon-close" />关闭</div>
        <div @click.stop="handleFullScreen">
          <div v-if="!isFullScreen"><i class="el-icon-full-screen" /> 全屏</div>
          <div v-else><i class="dx-fenping" /> 分屏</div>
        </div>
      </div>
    </div>
    <div v-if="ismodelExplode" class="explode-slider">
      <el-slider v-model="sliderVal" @input="sliderChanger"></el-slider>
    </div>
    <div v-show="isShowTree" class="header-tree-box">
      <el-tree
        :data="dataTree"
        show-checkbox
        default-expand-all
        node-key="id"
        ref="tree"
        highlight-current
        :props="defaultProps"
        @check="checkChange"
      >
      </el-tree>
    </div>
  </div>
</template>

<script>
import InitThreeJS from "./js/InitThreeJS";
import { mapState } from "vuex";
export default {
  name: "ThreeMap",
  props: {
    threeWidth: {
      type: Number,
      default: () => parseInt((document.body.clientWidth - 4) / 2),
    },
  },
  computed: {
    ...mapState({
      isShowThree: (state) => state.app.isShowThree, // threejs 开启关闭
      modelObj: (state) => state.app.modelFiles.obj, // 模型
      modelMtl: (state) => state.app.modelFiles.mtl, // 材质
      modelFbx: (state) => state.app.modelFiles.fbx, // fbx模型
      loadingProgressValue: (state) => state.app.loadingProgressValue || 0.0, // fbx模型
    }),
  },
  data() {
    return {
      map: null,
      sliderVal: 0, // 爆炸进度条
      isShowTree: false,
      ismodelExplode: false, // 开启爆炸
      dataTree: [],
      defaultTreeId: null,
      defaultProps: {
        children: "children",
        label: "name",
      },
      observer: null,
      recordOldValue: null,
      isFullScreen: false, // 是否全屏
      isProfileModels: false, // 是否剖切
    };
  },
  mounted() {
    this.init();
    // 监听
  },
  methods: {
    async init() {
      this.map = new InitThreeJS({
        el: this.$refs.chineseLineId,
        width: this.threeWidth,
        height: this.$refs.chineseLineId.clientHeight,
        modelObj: this.modelObj,
        modelMtl: this.modelMtl,
        modelFbx: this.modelFbx,
      });
      // 模型加载
      const aa = await this.map.initFbxModel();
      this.defaultTreeId = aa.id;
      aa.name = "地质模型";
      aa.disabled = false;
      this.dataTree = [aa];
      this.$refs.tree.setCheckedKeys([this.defaultTreeId]);
    },
    getTrees() {
      this.isShowTree = !this.isShowTree;
    },
    checkChange(data) {
      if (data.name === "地质模型") {
        const t = this.dataTree[0].children.findIndex((item) => !item.visible);
        if (t === -1) {
          this.dataTree[0].children.forEach((item) => {
            item.visible = false;
          });
        } else {
          this.dataTree[0].children.forEach((item) => {
            item.visible = true;
          });
        }
      } else {
        data.visible = !data.visible;
      }
    },
    closeContainer() {
      this.$store.commit("app/UPDATA_SHOWTHREE", true);
      this.$store.commit("app/UPDATA_threeFullScreen", false);
    },
    // 模型爆炸
    modelExplode() {
      this.isProfileModels = false;
      if (this.dataTree.length === 0) {
        this.$notify({
          title: "提示",
          message: "模型正在加载...",
          type: "warning",
        });
        return;
      }
      this.ismodelExplode = !this.ismodelExplode;
      if (this.ismodelExplode) {
        this.map.initModelExplode();
        
        this.map.beforeDestroyedPlanes();
      } else {
        this.map.beforeDestroyedPlanes();
        this.map.applyScalar(0.0);
      }
      // this.ismodelExplode && this.map.initModelExplode();
      // !this.ismodelExplode && this.map.applyScalar(0.0);
    },
    sliderChanger() {
      this.map.applyScalar((this.sliderVal / 100) * 1.2 || 0.0);
    },
    // 全屏
    handleFullScreen() {
      if (this.dataTree.length === 0) {
        this.$notify({
          title: "提示",
          message: "模型正在加载...",
          type: "warning",
        });
        return;
      }
      this.isFullScreen = !this.isFullScreen;
      this.$store.commit("app/UPDATA_threeFullScreen", this.isFullScreen);
    },
    //
    handleProfileModels() {
      this.ismodelExplode = false;
      this.map.applyScalar(0.0);
      if (this.dataTree.length === 0) {
        this.$notify({
          title: "提示",
          message: "模型正在加载...",
          type: "warning",
        });
        return;
      }
      this.isProfileModels = !this.isProfileModels;
      this.isProfileModels
        ? this.map.initProfileModels()
        : this.map.beforeDestroyedPlanes();
    },
  },
  watch: {
    threeWidth() {
      this.map.width = this.threeWidth;
    },
    // modelFbx() {
    //   this.map.beforeDestroyedPlanes();
    //   this.map.destroyedPlanes();
    //   this.map.destoryModel();
    //   this.map = null;
    //   setTimeout(() => {
    //     this.init();
    //   }, 1000);
    // },
  },
  beforeDestroyed() {
    this.map.beforeDestroyedPlanes();
    this.map.destroyedPlanes();
    this.map.destroyGui();
  },
  destroyed() {
    this.map.destroyGui();
    this.map.destoryModel();
    this.map = null;
  },
};
</script>
<style>
.dg.ac {
  z-index: 1000000 !important;
  top: 40px !important;
  right: -13px !important;
}
.three-map-container .el-tree {
  background: transparent !important;
  color: #fff !important;
}
.el-tree {
  background: transparent !important;
  color: #fff !important;
}

.three-map-container
  .el-tree-node:hover，
  .three-map-container
  .el-tree-node:focus {
  background: transparent !important;
}
.three-map-container .el-tree-node__content,
.three-map-container .el-tree-node__content:hover {
  background-color: transparent !important;
}
</style>

<style lang="scss" scoped>
.three-map-container {
  flex: 1;
  height: 100%;
  background-color: transparent;
  position: relative;
  .three-map-body {
    width: 100%;
    height: 100%;
  }
  .close-three-container {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 30px;
    height: 30px;
    color: #f2f2f2;
    text-align: center;
    line-height: 30px;
    font-size: 20px;
    transition: all 0.3s;
    transform: scale(0.8);
    i {
      cursor: pointer;
    }
    &:hover {
      transform: scale(1.2);
    }
  }
  .three-map-header {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 40px;
    border-bottom: 1px solid #f2f2f2;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px;
    font-size: 14px;
    color: #299dc8;
    i {
      font-size: 20px;
      margin-right: 10px;
    }
    & > div {
      display: flex;
      align-items: center;
      cursor: pointer;
    }
    .header-tree {
      flex: 10%;
      justify-content: flex-start;
      & > div:hover {
        color: aqua;
      }
    }
    .header-cooper {
      flex: 70%;
      justify-content: flex-end;
      cursor: pointer;
      & > div {
        margin: 0 10px;
        display: flex;
        align-items: center;
        & > div {
          display: flex;
          justify-content: center;
          align-items: center;
        }
      }
      & > div:hover {
        color: aqua;
      }
    }
  }
  .explode-slider {
    position: absolute;
    top: 50px;
    right: 3px;
    width: 300px;
    box-shadow: 0 0 6px #00b2ee, 0 0 2px #009acd inset;
    padding: 0 20px;
    background-color: rgba(24, 116, 205, 0.18);
  }
  .header-tree-box {
    position: absolute;
    top: 40px;
    left: 2px;
    width: 220px;
    // height: 300px;
    background-color: rgba(0, 0, 0, 0.5);
    box-shadow: 0 0 4px #fff, 0 0 4px #fff inset;
    border-radius: 6px;
    overflow-x: hidden;
    overflow-y: auto;
  }
}

.header-tree-box::-webkit-scrollbar {
  width: 4px;
  /*height: 4px;*/
}
.header-tree-box::-webkit-scrollbar-thumb {
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.2);
}
.header-tree-box::-webkit-scrollbar-track {
  border-radius: 0;
  background: rgba(0, 0, 0, 0.1);
}
</style>